<template>
    <div class="Main">
        <div class="w1440">
            <div v-loading="loading" class="flex_fsw">
                <div class="MainLeft w72">
                    <div class="ForumBox bgwhite slideTxt min400">

                        <el-tabs v-model="activeTab">
                            <el-tab-pane :label="partName" name="first">
                                <ul class="ForumList">
                                    <li v-for="(item, index) in currentList" :ket="index" class="dot">
                                        <router-link :to="'/commentpost?id='+item.id" tag="a">
                                            <div class="tit">
                                                <b>{{index+1}}</b>
                                                <em class="dot">{{item.title}}</em>
                                                <i class="hot" v-if="item.readCount > 500">热</i>
                                                <div class="view">{{formatCommentCount(item.readCount)}}</div>
                                            </div>
                                        </router-link>
                                    </li>
                                </ul>
                                <el-empty v-if="currentList.length == 0" :image-size="200" />
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
                <div class="MainLeftRight w26">
                    <!-- 热门帖子 -->
                    <HotPost />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="PartPost">
import { postApi } from '@/api';
import { computed, ref, reactive, onBeforeMount, watch } from 'vue';
import { useRouter } from 'vue-router';
import { commonMethods } from '@/utils/common';
import HotPost from '@/components/HotPost.vue'; // 热门帖子

// 公共方法和计算属性
const { formatCommentCount } = commonMethods();

// 路由
const router = useRouter();

/**
 * @name 数据
 */
const partName = ref(''); // 版块名称
const activeTab = ref('first'); // 选中的标签页
const loading = ref(true); // 加载中

 /**
  * @name 生命周期
  */
 onBeforeMount(() => {
    getPartPost();
 })

 /**
  * @name 获取当前版块帖子
  */
 const queryParam = reactive({
    plateId: 0,
    topicId: 2,
    sortField: 1,
    sortOrder: 'DESC'
 })
 const currentList = ref([]); // 帖子列表
 const getPartPost = () => {
    loading.value = true;
    partName.value = router.currentRoute.value.query.name;
    queryParam.plateId = router.currentRoute.value.query.id;
    postApi.getPratPostList(queryParam).then(res => {
        currentList.value = res.result.list || [];
        console.log(res);
    }).catch(err => {}).finally(() => {
        loading.value = false;
    })
 }

 // 监听查询参数变化
 watch(() => router.currentRoute.value.query, () => {
    getPartPost();
 })


</script>

<style lang="less" scoped>
:deep(.el-carousel__container) {
    height: 355px;
}

:deep(.el-tabs__item) {
    font-size: 20px;
    color: #666;
    padding-bottom: 10px;
}

:deep(.el-tabs__item.is-active) {
    color: #333;
}

:deep(.el-tabs__active-bar) {
    background-color: #00753e;
}
</style>